<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       <h2 :style="{opacity}">欢迎学习Vue</h2>
       <button @click="stop">点击我暂停</button>
    </div>

    <script type='text/javascript'>
        const vm = new Vue({
           el:'#root',
           data:{
             opacity:1
           },
           methods: {  
             stop(){
                // (3) 销毁必须要手动调，否则一般是不会销毁的
                this.$destroy()
             }
           },
           mounted() {
              /**
               * (1) 想要在vm的不同函数之间使用同一个属性，就可以手动追加一个属性(this.xxx = )
               * (2) 自己追加一个属性最好不要使用太敏感的 id、key...   
               * */ 
              this.id = setInterval(() => {
                vm.opacity -= 0.01
                if(vm.opacity <= 0) vm.opacity = 1
          }, 16);
           },
           beforeDestroy() {
                // (4) 清理定时器要放在beforeDestroy，因为如果在非销毁时清理的话清理地不彻底，其他地方也可以操作定时器
                clearInterval(this.id)
                console.log('vm准备驾鹤西游了');
           },
        })
        
        
    </script>
</body>
</html>